<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
      <a-input-search v-model:value="formState.searchKey" placeholder="姓名/助记码/卡号/住院号" allow-clear class="w-56" @search="getData" />
      <a-range-picker v-model:value="formState.dateRange" class="mt-2 w-56" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="getData" />
      <BaseList :data-source="dataSource" :loading="loading" class="mt-2">
        <template #renderItem="{ item }">
          <div class="py-2 px-3" :class="store.currentPatient?.aptmLsh === item?.aptmLsh ? 'active' : ''" @click="onSelectPatient(item)">
            <div class="flex justify-between items-center">
              <div class="text-base font-bold text-primary truncate w-16" :title="item.brName">{{ item.brName || '-' }}</div>
              <div class="flex-1 text-center truncate" :title="`床位号：${item.lastBedCode}`">{{ item.lastBedCode }}</div>
              <div class="text-grey flex-1 text-center truncate" :title="`手术房间：${item.oprRoomName}`">{{ item.oprRoomName }}</div>
              <!-- dayjs().format('MM-DD HH:mm') -->
              <div class="text-right text-primary font-semibold">
                {{ dayjs(item.oprDate).format('MM-DD') }}
                <span class="ml-1"> {{ item.oprTime }}</span>
              </div>
            </div>
            <div class="flex justify-between items-end pt-2">
              <a-tooltip :title="item.oprName?.length > 8 ? item.oprName : ''" placement="bottomLeft" :mouse-enter-delay="0.6">
                <div class="flex-1 truncate text-sm text-gray-400">{{ item.oprName || '手术名称' }}</div>
              </a-tooltip>
            </div>
          </div>
        </template>
      </BaseList>
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <PatientInfoHeader is-outpatient show-insurance :patient-info="store.currentPatient">
        <a-divider type="vertical" :style="{ height: '40px', margin: '0 16px' }" />
        <div>
          <div class="flex items-center">
            <LabelValue label="住院号" :width="140" :value="store.currentPatient.admissionCode" />
            <LabelValue label="预收款" :width="140" :value="formatAmount(store.currentPatient.dpJe)" />
            <LabelValue label="手术名称" :width="280" :value="store.currentPatient.oprName" />
            <LabelValue label="联合手术1" :width="200" :value="store.currentPatient.jointOprName1" />
            <LabelValue label="手术房间" :width="160" :value="store.currentPatient.oprRoomName" />
            <LabelValue label="器械护士" :width="160" :value="store.currentPatient.instrumenttNurseName" />
            <LabelValue label="一助" :width="140" :value="store.currentPatient.firstNurseName" />
            <LabelValue label="麻醉方式" :width="200" :value="store.currentPatient.anaesName" />
            <LabelValue label="心电监护" :width="120" :value="store.currentPatient.isEcg ? '是' : '否'" />
            <LabelValue label="联合手术2" :width="260" :value="store.currentPatient.jointOprName2" />
            <LabelValue label="联合手术4" :width="260" :value="store.currentPatient.jointOprName4" />
          </div>
          <div class="flex items-center">
            <LabelValue label="账户余额" :width="140" :value="formatAmount(store.currentPatient.ye)" />
            <LabelValue label="住院费用" :width="140" :value="formatAmount(store.currentPatient.zfy)" />
            <LabelValue label="手术医生" :width="280" :value="store.currentPatient.oprDoctorName" />
            <LabelValue label="嘱托" :width="200" :value="store.currentPatient.advMemo" />
            <LabelValue label="巡回护士" :width="160" :value="store.currentPatient.tourNurseName" />
            <LabelValue label="麻醉医生" :width="160" :value="store.currentPatient.anaesDoctorName" />
            <LabelValue label="二助" :width="140" :value="store.currentPatient.secondNurseName" />
            <LabelValue label="特殊要求" :width="200" :value="store.currentPatient.specRequirements" />
            <LabelValue label="复发" :width="120" :value="store.currentPatient.isRecurrence ? '是' : '否'" />
            <LabelValue label="联合手术3" :width="260" :value="store.currentPatient.jointOprName3" />
            <LabelValue label="联合手术5" :width="260" :value="store.currentPatient.jointOprName5" />
            <LabelValue label="联合手术6" :width="260" :value="store.currentPatient.jointOprName6" />
          </div>
        </div>
      </PatientInfoHeader>
      <div class="flex flex-1 mt-2 overflow-hidden">
        <a-card class="flex-1 overflow-hidden" :body-style="{ padding: '0 8px', height: '100%', overflow: 'hidden' }">
          <a-tabs v-model:active-key="tabsKey" class="h-full" destroy-inactive-tab-pane @change="onChangeTabs">
            <a-tab-pane key="医嘱" tab="医嘱" class="h-full">
              <TabDoctorAdvice is-operation class="advice-style" @search="getData()" />
              <InDoctorAdviceList :aptm-lsh="store.currentPatient?.aptmLsh" />
            </a-tab-pane>
            <!-- <a-tab-pane key="检查" tab="检查">
              <TabCheck />
            </a-tab-pane> -->
            <a-tab-pane key="检验" tab="检验">
              <TabLaboratory />
            </a-tab-pane>
            <a-tab-pane key="诊断" tab="诊断">
              <TabDispose />
            </a-tab-pane>
            <a-tab-pane key="住院病历" tab="住院病历"> 住院病历 </a-tab-pane>
            <a-tab-pane key="病案首页" tab="病案首页">
              <MedicalRecord :inplsh="store.currentPatient?.inplsh" />
            </a-tab-pane>
            <a-tab-pane key="护理文书" tab="护理文书"> 护理文书 </a-tab-pane>
          </a-tabs>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
//共用住院医生工作站组件
import TabLaboratory from '@/views/in-doctor/workstation/components/TabLaboratory'
import TabDispose from '@/views/in-doctor/workstation/components/TabDispose'
// import TabCheck from '@/views/in-doctor/workstation/components/TabCheck'
import TabDoctorAdvice from '@/views/in-doctor/workstation/components/TabDoctorAdvice'
import MedicalRecord from '@/components/MedicalRecord'
import useStore from '@/views/in-doctor/workstation/store'
import InDoctorAdviceList from './InDoctorAdviceList'

const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().add(7, 'day').format('YYYY-MM-DD')],
  searchKey: ''
})
const router = useRouter()
const store = useStore()
const tabsKey = ref(router.currentRoute.value.query.tab || '医嘱')

const params = computed(() => {
  return {
    stdate: formState.value.dateRange?.[0],
    eddate: formState.value.dateRange?.[1],
    statuss: ['1', '3', '4', '5'],
    pyjm: formState.value.searchKey
  }
})
const { loading, dataSource, getData } = useFetch({
  url: '/oprOperation/opr/getOperationAppointmentList',
  immediate: true,
  params,
  onSuccess: (data) => {
    const active = data.filter((item) => item.aptmLsh === store.currentPatient.aptmLsh)

    onSelectPatient(active[0] || data[0] || {})
  }
})

//切换Tab标签
const onChangeTabs = () => {
  router.push({
    path: router.currentRoute.value.path,
    query: {
      tab: tabsKey.value
    }
  })
}
const onSelectPatient = (patient) => {
  store.currentPatient = patient
}

onUnmounted(() => {
  store.currentPatient = {}
})
</script>
<style lang="less" scoped>
:deep(.ant-tabs) {
  .ant-tabs-tab {
    padding: 12px 32px;
  }
  .ant-tabs-tab + .ant-tabs-tab {
    margin: 0 16px;
  }
  .ant-tabs-tab:nth-child(4) {
    position: relative;
    &::after {
      position: absolute;
      top: 0;
      right: -16px;
      width: 1px;
      height: 100%;
      background: #f0f0f0;
      content: '';
    }
  }
}
.advice-style {
  height: calc(100vh - 500px);
  overflow: scroll;
}
</style>
